<!doctype html>
<html>
	<head>
		<title>无缝滚动innerHTML</title>
		<meta charset="utf-8">
		<style>
			body{
			margin:0;
			padding:0;
			}
			ul{
				margin:0;
				padding:0;
			}
			#div1{
				overflow: hidden;
				width:600px;
				height:75px;
				border:1px dashed #000;
				position: relative;
				margin:20px auto;
			}
			#div2{
				width:600px;
				height:75px;
				position:absolute;
				top:0;
				left:0;
			}
			#div2 li{
				width:120px;
				float:left;
				list-style: none;
			}
			#div1 li img{
				width: 100%;
			} 
			#btn{
				width:200px;
				height:40px;
				margin:100px auto;
			}
			a{
				text-decoration: none;
				min-width:20px;
				min-height:20px;
				text-align: center;
				border:1px solid #000;
				float:left
			}
		</style>
		<script>
			window.onload=function(){
				var oDiv1=document.getElementById('div1');
				var oDiv2=document.getElementById('div2');
				var ali=oDiv1.getElementsByTagName('li');
				oDiv2.innerHTML+=oDiv2.innerHTML;		
				var timer=null;
				oDiv2.style.width=ali.length*ali[0].offsetWidth+'px';
				//alert(ali[0].offsetWidth);
				function go(){
					if(oDiv2.offsetLeft<=-oDiv2.offsetWidth/2)
					{
						oDiv2.style.left='0';
					}
						oDiv2.style.left=oDiv2.offsetLeft-1+'px';
				}
				timer=setInterval(go,30);
				/*移入移出*/
				oDiv1.onmouseover=function(){
					clearInterval(timer);
				}
				oDiv1.onmouseout=function(){
					timer=setInterval(go,30);
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<ul id="div2">
				<li><img src="./film/fj1.jpg"></li>
				<li><img src="./film/fj2.jpg"></li>
				<li><img src="./film/fj3.jpg"></li>
				<li><img src="./film/fj4.jpg"></li>
				<li><img src="./film/fj5.jpg"></li>
			</ul>
		</div>
	</body>
</html>